<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>个人信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="changePwd container">
            <left-nav-bar :active="active"></left-nav-bar>
            <div class="right">
                <div class="line-ti">
                    <div>个人信息</div>
                </div>
                <div style="height:74px;"></div>
                <div class="input-pwd">
                    <div class="li">
                        <div>头像</div>
                        <div class="avatar-upload">
                            <el-upload
                                class="avatar-uploader"
                                :action="url"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :headers="headers"
                                :before-upload="beforeAvatarUpload"
                                :on-progress="onProgress"
                                >
                                <img v-if="avatar" :src="avatar" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <!-- <el-upload class="el-upload-dragger" :action="url" :data="qiniuData" :limit="1" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
                                <div class="avatar-img">
                                    <img :src="avatar || $global.Image.icon_default_avatar" />
                                </div>
                            </el-upload> -->
                        </div>
                    </div>
                    <div class="li">
                        <div>昵称</div>
                        <input type="text" v-model="nickname" placeholder="请输入昵称" />
                    </div>
                    <div class="li">
                        <div>公司名称</div>
                        <input type="text" v-model="company_name" placeholder="请输入公司名称" />
                    </div>
                    <!-- <div class="li">
                        <div>修改密码</div>
                        <input type="text" v-model="pwd" placeholder="请输入新密码" />
                    </div> -->
                </div>
                <div class="pwd-but">
                    <el-button class="btn-r" @click="submit">保存修改</el-button>
                </div>
            </div>
        </div>
        <div style="height: 200px"></div>
    </div>
</template>

<script>
import leftNavBar from "@components/leftNavBar";
import { postUserEdit, getLogout, switchH5Login, getUser,getCodeApi } from "@api/user";
import { qiniuToken } from "@api/public";

export default {
    data() {
        return {
            active: 20,
            avatar: "",
            phone:"",
            avatar1: "",
            pwd:"",
            nickname: "",
            company_name:"",
            headers:{
                "Authori-zation":'' 
            },
            switchUserInfo: {},
            // qiniu upload
            // url: "http://upload-z2.qiniup.com",
            url: "http://gongchangguanjia.3todo.com/api/upload/image",
            qiniuDomail: "",
            qiniuData: {},
            fileType: ["image/png", "image/jpg", "image/jpeg", "image/gif"],
        };
    },
    components: {
        leftNavBar,
    },
    mounted() {
        this.getUserInfo();
    },
    methods: {
        // 获取用户信息
        getUserInfo() {
            let that = this;
            that.headers = {"Authori-zation" :"Bearer " + localStorage.getItem("token")}
            getUser().then((res) => {
                this.company_name = res.data.company_name;
                this.nickname = res.data.nickname;
                this.avatar = res.data.avatar;
                this.phone = res.data.phone;
            });
        },
        // 提交信息
        submit() {
            if (!this.nickname) {
                this.$dialog.error("请输入昵称");
                return;
            }
            postUserEdit({
                nickname: this.nickname,
                avatar: this.avatar,
                company_name:this.company_name,
                pwd:this.pwd
            }).then((res) => {
                    this.$dialog.success(res.msg);
                    this.$store.dispatch("USERINFO", true);
                }).catch(err => {
                    this.$dialog.error(err.msg);
                }
            );
        },
        // upload img
        getQiniuToken() {
            qiniuToken()
                .then((res) => {
                    this.qiniuData.token = res.data.uptoken;
                    this.qiniuDomail = res.data.pc_domain;
                })
                .catch((err) => {
                    this.$dialog.error(err.msg || "获取七牛数据失败");
                });
        },
        //头像设置
        handleAvatarSuccess(res, file) {
            console.log(res,file)
                this.avatar = res.data.url;
        },
        // 检验头像大小和类型
        beforeAvatarUpload(file) {
            let that = this;
            const isImage = this.fileType.indexOf(file.type) > -1;
            const isLt20M = file.size / 1024 / 1024 < 20;

            if (!isImage) {
                this.$dialog.error("请上传图片类型文件");
            }
            if (!isLt20M) {
                this.$dialog.error("请上传小于20M文件！");
            }
            return isImage && isLt20M;
        },
    },
};
</script>

  <style >
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-left: 34px;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #da213d;
.changePwd {
    /*width: 70%;*/
    margin: 0 auto;
    display: flex;

    .right {
        width: 1000px;
        margin-left: 32px;

        .line-ti {
            width: 100%;
            border-bottom: 1px solid #dbdbdb;

            > div {
                color: #da213d;
                font-size: 18px;
                border-bottom: 3px solid $color;
                width: 72px;
                line-height: 36px;
                font-weight: bold;
            }
        }

        .input-pwd {
            .li {
                display: flex;
                // min-height: 40px;
                align-items: center;
                margin-bottom: 24px;
                position: relative;

                > div:nth-of-type(1) {
                    width: 100px;
                    text-align: right;
                    font-size: 16px;
                    color: #666666;
                }

                input {
                    width: 520px;
                    height: 40px;
                    border-radius: 4px;
                    border: 1px solid rgba(217, 217, 217, 1);
                    font-size: 14px;
                    padding-left: 16px;
                    border-radius: 4px;
                    margin-left: 34px;
                }

                input::-webkit-input-placeholder {
                    color: #000000;
                    opacity: 0.25;
                }

                .li-du {
                    width: 338px;
                }
            }

            .lock {
                width: 20px;
                height: 20px;
                position: absolute;
                left: 516px;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        .pwd-but {
            margin: 40px 0 0 116px;
        }
    }
}
.btn-r {
    color: #ffffff !important;
}
.get-code {
    width: 110px;
    height: 34px;
    background: #da213d;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    color: #ffffff;
    line-height: 34px;
    margin-left: 129px;
}
</style>
